<!--
 * @Description: 供应链物流详情
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-09-26 10:44:26
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="wlbox">
    <view class="header">
      <view class="jcwz" style="margin-bottom: 20rpx"> 卖家已发货 </view>
      <view class="txbox2" v-for="(value, index) in logisticsList">
        <text style="margin-right: 10rpx">{{ value.head }}</text>
        <van-button
          plain
          hairline
          size="small"
          type="default"
          @click="handleCopy(value.number)"
          >复制</van-button
        ></view
      >
    </view>
    <view class="footer">
      <!-- 用户信息和地址 -->
      <view class="smallKuai txbox">
        <view>
          <u-image
            width="40rpx"
            height="40rpx"
            :src="dztb"
            style="margin: 0 20rpx"
          ></u-image
        ></view>
        <view>
          <view>
            <text style="margin-right: 10rpx">{{ addressObj.name }}</text>
            <text>{{ addressObj.phone }}</text>
          </view>
          <view class="hswz"> {{ addressObj.addressStr }} </view>
        </view>
      </view>
      <!-- 商品信息 -->
      <!-- <view class="smallKuai txbox">
        <view style="margin-right: 20rpx">
          <van-image
            width="180rpx"
            height="180rpx"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </view>
        <view>
          <view
            style="width: 470rpx; font-size: 28rpx; font-weight: bold"
            class="overwz jcwz"
          >
            商品名称1111111111111111111111111111
          </view>
          <view class="hswz txbox2" style="margin: 20rpx 0">
            <view class="overwz">颜色</view>
            <view>x1</view>
          </view>
          <view style="color: red; font-size: 32rpx">￥12 </view>
        </view>
      </view> -->
      <!-- 物流信息 -->

      <view class="smallKuai">
        <u-collapse>
          <u-collapse-item
            :title="item.head"
            v-for="(item, index) in logisticsList"
            :key="index"
            :open="item.open"
            @change="handleStep(item.number, item.open, index)"
          >
            <view class="collapse-item">
              <van-steps
                :steps="stepArr"
                :active="activeNum"
                direction="vertical"
                active-color="#FF6C18"
                style="width: 500rpx"
              >
                <van-step v-for="(bz, idx) in stepArr" :key="idx">
                  <view style="font-weight: bold; color: #333">{{
                    bz.msgTime
                  }}</view>
                  <view class="step-content">{{ bz.content }}</view>
                </van-step>
              </van-steps>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
//api
import { baseApi, userApi, enumAll, orderApi } from '@/api'
// stroe
import { userGylCarStore, useUserStore } from '@/store'
//bg
import dztb from '../../static/dztb.png'
import { watch } from 'fs'

// 初始数据
const gylStore = userGylCarStore()
const logisticsList = ref<any>([])
const goodsList = ref<any>([])
const orderId = ref(null)
const addressObj = reactive({ name: '', phone: '', addressStr: '' })
const isExpanded = ref(false)

const numList = ref([
  {
    name: '下单'
  },
  {
    name: '出库'
  },
  {
    name: '运输'
  },
  {
    name: '签收'
  }
])
const stepArr = ref<any>([])
const activeNum = ref(0)

// 点击展开或收起
const handleStep = (number: any, open: any, index: any) => {
  const item = logisticsList.value[index]
  item.open = !open

  // 只有在展开且未加载过数据时才调用接口
  if (!open && !item.loaded) {
    getDhTrackInfo(number).then(() => {
      item.loaded = true // 标记为已加载
    })
  }
}
const handleCopy = (number: any) => {
  uni.setClipboardData({
    data: number,
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
    fail: () => {
      uni.showToast({ title: '复制失败', icon: 'none' })
    }
  })
}

// 物流信息
const getDhTrackInfo = async (item: any) => {
  const { data } = await orderApi.getDhTrackInfo({
    number: item
  })
  // data.sort(())
  console.log(data, '物流信息')
  stepArr.value = data.list.reverse()
}

//订单信息
//从订单进入的
const byOrderId = async () => {
  const { data } = await orderApi.orderInfo({
    detail: true,
    id: orderId.value
  })
  console.log(data, '订单详情')
  // 收货地址详情
  const str = data.address
  addressObj.name = str.name
  addressObj.phone = str.phone
  addressObj.addressStr =
    str.provinceName + str.cityName + str.districtName + str.street + str.other
  // 商品详情
  goodsList.value = data.orderProductSkus.map((item: any) => {
    return {
      ...item,
      actualDeductible: item.scoreMoney
    }
  })
  logisticsList.value = JSON.parse(data.orderThirdParty.logistics).map(
    (item: any, index: number) => {
      return {
        ...item,
        open: false,
        loaded: false,
        head: `包裹${index + 1}:${item.company}，${item.number}`
      }
    }
  )
  if (logisticsList.value.length > 0) {
    logisticsList.value[0].open = true
    logisticsList.value[0].loaded = true
    getDhTrackInfo(logisticsList.value[0].number)
  }
}

onLoad((option: any) => {
  orderId.value = option?.orderId
  byOrderId()
})
</script>
<style lang="less" scoped>
.wlbox {
  font-size: 24rpx;
  position: relative;
  .header {
    padding: 20rpx;
    position: absolute;
    width: 750rpx;
    height: 800rpx;
    background-image: url('../../static/wlbj.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .infobox {
      padding: 20rpx;
      display: flex;
      .infobox-l {
        margin-right: 20rpx;
      }
    }
  }
  .footer {
    position: absolute;
    top: 180rpx;
    right: 20rpx;
    .smallKuai {
      width: 710rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 20rpx;
      .bt {
        margin-right: 10rpx;
      }
      .xhz {
        height: 60rpx;
      }
    }
  }
}
.jcwz {
  font-size: 32rpx;
  font-weight: bold;
}
.hswz {
  color: #999;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.txbox {
  display: flex;
  align-items: center;
}
.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6c18;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  cursor: pointer;
}
.collapse-item {
  height: 200vh;
}
// :deep(.u-collapse-body) {
//   height: auto !important;
// }
</style>
